import React, {useEffect, useState} from 'react';
import {View,} from '@tarojs/components';


import styles from './index.module.scss';
import {Arrow, ShareOutlined} from "@taroify/icons";
import {Popup} from "@taroify/core";
import CouponPopup from "@/mall/pages/good/CouponPopup";

const Index: React.FC = () => {
    const [coupons] = useState(['满减', '满减', '满减', '满减'])
    const [showCouponPopup, setShowCouponPopup] = useState<boolean>(false)

    useEffect(() => {
        load();
    }, []);

    const load = async () => {

    }

    return (
        <View className={styles.page}>
            <View className={styles.page_head}>
                <View className={styles.page_head_left}>
                    <View className={styles.page_head_left_txt}>
                        ¥
                    </View>
                    <View className={styles.page_head_left_price}>
                        256
                    </View>
                    <View className={styles.page_head_left_txt}>
                        起
                    </View>
                    <View className={styles.page_head_left_line}>
                        ¥314
                    </View>

                </View>
                <View className={styles.page_head_right}>
                    已售 1032
                </View>

            </View>
            <View className={styles.page_body}>
                <View className={styles.page_body_left}>
                    {coupons.map((item, index) => (
                        <View className={styles.page_body_left_coupon} key={index}>{item}</View>
                    ))}
                </View>
                <View className={styles.page_body_right} onClick={() => setShowCouponPopup(true)}>
                    <View className={styles.page_body_right_txt}>
                        领券
                    </View>
                    <View className={styles.page_body_right_icon}>
                        <Arrow size={12}/>
                    </View>
                </View>
            </View>
            <View className={styles.page_foot}>
                <View className={styles.page_foot_left}>
                    纯色纯棉休闲圆领短袖T恤纯白亲肤厚柔软细腻面料纯白短袖套头T恤
                </View>
                <View className={styles.page_foot_right}>
                    <ShareOutlined size={18}/>
                    <View className={styles.page_foot_right_txt}>
                        分享
                    </View>

                </View>
            </View>

            <Popup
                lock
                rounded placement='bottom'
                onClose={async () => {
                    setShowCouponPopup(false)
                }} open={showCouponPopup}
            >
                <Popup.Close></Popup.Close>
                <CouponPopup></CouponPopup>
            </Popup>

        </View>
    );
};

export default Index;
